<!-- 说明：此页面为单列表页面 demo，列表的查询、操作、表头以及分页均固定显示在页面上下方，具体的table中数据可以滚动显示 -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/template/template.xhtml"
	xmlns:s="http://sduept.security.el/func">
	
	<ui:define name="head">
	<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
<style type="text/css">

.ui-datatable-scrollable-header-box {
    margin-left: 0px;
    margin-right: 15px !important;
}

.red {
	background-color: #fca752
}

</style>

	</ui:define>
	<ui:define name="content">
		<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
			<p:commandButton value="是" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="否" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		</p:confirmDialog>
		<!-- 如果有该div，且使用公共js，则名字headDiv不允许改变 -->
		<div id="headDiv" class="box box-solid with-border">
			<h:form id="headForm">
				<!-- 如果有该div，且使用公共js，则名字queryDiv不允许改变 -->
				<div class="box-header" id="queryDiv">
					<!-- 此处写查询条件 -->
					<p:remoteCommand name="changeYear" actionListener="#{specialMaintenanceStationQueryController.changeYear}" />
					<p:outputLabel value="特维年份:" style="margin-left:3px;" />
					<input type="text" id="year" onchange="chaneYear()"
						style="width: 60px; margin-left: 5px; text-align: center" />
					<p:outputLabel value="电压等级:" style="margin-left:15px;" />
					<h:selectOneMenu id="vol"
						value="#{specialMaintenanceStationQueryController.volQuery}"
						style="width:80px;height:28px;margin-right:5px;margin-left:5px;">
						<f:selectItem itemLabel="220kV" itemValue="220" />
						<f:selectItem itemLabel="500kV" itemValue="500" />
					</h:selectOneMenu>
					<p:outputLabel value="厂站名称:" style="margin-left:15px;" />
					<p:autoComplete placeholder="输入首字母查询" id="stationQuery" size="15"
						value="#{specialMaintenanceStationQueryController.queryMS.station}"
						completeMethod="#{cimUtilController.completeCimStation}"
						scrollHeight="400" dropdown="true" style="margin-left:5px;" />
					<p:commandButton icon="ui-icon-search" value="查询"
						oncomplete="closeSelectDiv();"
						actionListener="#{specialMaintenanceStationQueryController.query}"
						update="form:dataTb" style="margin-left:15px;" />
					<p:commandButton icon="ui-icon-refresh" value="重置"
						oncomplete="resetQuery();"
						actionListener="#{specialMaintenanceStationQueryController.resetQuery()}"
						update="form:dataTb vol stationQuery cdtStart cdtEnd ftStart ftEnd dispatchUnit_id maintenanceUnit_id companyName_id cutPowerPlan finishBefore finish"
						style="margin-left:5px;" />
					<p:commandButton value="未关联设备" update=":connForm:connDig"
						oncomplete="PF('connDig').show()"
						actionListener="#{specialMaintenanceStationQueryController.getUnBind()}"
						style="margin-left:10px;" />
					<div class="box-tools pull-right">
						<button type="button" id="selectButton" title="高级查询" class="btn btn-default"
							onclick="onSelectDivClick();" style="margin-right: 50px;">
							<span id="selectButtonIcon" class="fa fa-caret-down">高级查询</span>
						</button>
					</div>
				</div>
				<!-- 如果有该div，且使用公共js，则名字"selectDiv"不允许改变 -->
				<div class="panel-collapse collapse" id="selectDiv">
					<!-- 查询条件 -->
					<h:panelGrid columns="8" style="margin-top:8px;margin-bottom:10px" cellpadding="8">
						<p:outputLabel value="传动开始时间:" style="margin-left:5px;" />
						<p:calendar navigator="true" style="margin-left:5px;"
							id="cdtStart"
							value="#{specialMaintenanceStationQueryController.chuandongTimeStart}"
							pattern="yyyy-MM-dd" />
						<p:outputLabel value="至" style="margin-left:5px;" />
						<p:calendar navigator="true" style="margin-left:5px;" id="cdtEnd"
							value="#{specialMaintenanceStationQueryController.chuandongTimeEnd}"
							pattern="yyyy-MM-dd" />
						<p:outputLabel value="完成时间:" style="margin-left:15px;" />
						<p:calendar navigator="true" autocomplete="off"
							style="margin-left:5px;" id="ftStart"
							value="#{specialMaintenanceStationQueryController.finishedTimeStart}"
							pattern="yyyy-MM-dd" />
						<p:outputLabel value="至" style="margin-left:5px;" />
						<p:calendar navigator="true" style="margin-left:5px;" id="ftEnd"
							value="#{specialMaintenanceStationQueryController.finishedTimeEnd}"
							pattern="yyyy-MM-dd" />
					</h:panelGrid>

					<h:panelGrid columns="6" style="margin-top:8px;margin-bottom:10px" cellpadding="6">
						<p:outputLabel value="调管机构："
							style="margin-left:5px;margin-bottom:5px;" />
						<p:autoComplete dropdown="true" id="dispatchUnit_id"
							value="#{specialMaintenanceStationQueryController.queryMS.transMechanism}"
							style="margin-right:10px;margin-bottom:5px;" size="18"
							scrollHeight="200" placeholder="输入拼音首字母查询"
							completeMethod="#{ledgerQueryDataController.completeDispatchUnit}">
						</p:autoComplete>

						<p:outputLabel value="运维机构："
							style="margin-right:5px;margin-bottom:5px;" />
						<p:autoComplete dropdown="true" id="maintenanceUnit_id"
							value="#{specialMaintenanceStationQueryController.queryMS.operationDepartment}"
							style="margin-right:10px;margin-bottom:5px;" size="18"
							scrollHeight="200" placeholder="输入拼音首字母查询"
							completeMethod="#{ledgerQueryDataController.completeMaintenanceUnit}">
						</p:autoComplete>

						<p:outputLabel value="运维分子公司:"
							style="margin-left:15px;margin-bottom:5px;" />
						<p:autoComplete dropdown="true" id="companyName_id"
							value="#{specialMaintenanceStationQueryController.queryMS.companyName}"
							style="margin-right:10px;margin-bottom:5px;" size="18"
							scrollHeight="200" placeholder="输入拼音首字母查询"
							completeMethod="#{ledgerQueryDataController.completeMaintenanceUnit}">
						</p:autoComplete>
					</h:panelGrid>

					<h:panelGrid columns="6" style="margin-top:8px;margin-bottom:10px" cellpadding="6">
						<p:outputLabel value="是否安排停电计划:"
							style="margin-left:5px;margin-bottom:5px;" />
						<h:selectOneMenu
							value="#{specialMaintenanceStationQueryController.cutPowerPlanQuery}"
							style="width:80px;height:28px;margin-left:5px;margin-bottom:5px;"
							id="cutPowerPlan">
							<f:selectItem itemLabel="" itemValue="" />
							<f:selectItem itemLabel="是" itemValue="1" />
							<f:selectItem itemLabel="否" itemValue="0" />
						</h:selectOneMenu>

						<p:outputLabel value="6.30前是否应该完成:"
							style="margin-left:15px;margin-bottom:5px;" />
						<h:selectOneMenu
							value="#{specialMaintenanceStationQueryController.finishBeforeQuery}"
							style="width:80px;height:28px;margin-left:5px;margin-bottom:5px;"
							id="finishBefore">
							<f:selectItem itemLabel="" itemValue="" />
							<f:selectItem itemLabel="是" itemValue="1" />
							<f:selectItem itemLabel="否" itemValue="0" />
						</h:selectOneMenu>

						<p:outputLabel value="6.30前是否已完成:"
							style="margin-left:15px;margin-bottom:5px;" />
						<h:selectOneMenu
							value="#{specialMaintenanceStationQueryController.finishQuery}"
							style="width:80px;height:28px;margin-left:5px;margin-bottom:5px;"
							id="finish">
							<f:selectItem itemLabel="" itemValue="" />
							<f:selectItem itemLabel="是" itemValue="1" />
							<f:selectItem itemLabel="否" itemValue="0" />
						</h:selectOneMenu>
					</h:panelGrid>
				</div>
			</h:form>
		</div>
		<div class="box box-solid with-border">
			<h:form id="form">
				<p:growl id="msgs" showDetail="true" />
				<!-- dataTable中必须有scrollable="true"，其他自行补全  -->
				<p:dataTable id="dataTb" var="device" rowKey="#{device.id}"
					emptyMessage="无记录"
					value="#{specialMaintenanceStationQueryController.maintenanceStations}"
					style="margin-bottom:20px;text-align:center" rows="20" paginator="true"
					paginatorTemplate="{left} {RowsPerPageDropdown} {right} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Customer}"
					rowsPerPageTemplate="30,50,100" paginatorPosition="bottom" 
					rowStyleClass="#{device.blankId == null ? 'red':null}" scrollable="true" >
					<f:facet name="{Customer}">
             			<p:outputLabel value="总计：#{specialMaintenanceStationQueryController.maintenanceStations.size()}条纪录" style="margin-left:20px" />
             		</f:facet>
					<f:facet name="{left}">
             			<p:outputLabel value="每页显示" />
             		</f:facet>
					<f:facet name="{right}">
             			<p:outputLabel value="条" style="margin-right:20px"/>
             		</f:facet>
					<!-- 表中具体数据 -->
					<p:column headerText="调管机构">
						<h:outputText value="#{device.transMechanism}" />
					</p:column>
					<p:column headerText="运维分子公司">
						<h:outputText value="#{device.companyName}" />
					</p:column>
					<p:column headerText="运维单位">
						<h:outputText value="#{device.operationDepartment}" />
					</p:column>
					<p:column headerText="厂站" width="100">
						<h:outputText value="#{device.station}" />
					</p:column>
					<p:column headerText="间隔" width="80" sortBy="#{device.blankName}">
						<h:outputText value="#{device.blankName}" />
					</p:column>
					<p:column headerText="设备类型" width="80">
						<h:outputText value="#{device.equipmentType}" />
					</p:column>
					<p:column headerText="是否安排了停电计划" width="100">
						<h:outputText value="#{device.cutPowerPlan ? '是':'否'}" />
					</p:column>
					<p:column headerText="传动开始时间" sortBy="#{device.chuandongTime}">
						<h:outputText value="#{device.chuandongTime}">
							<f:convertDateTime pattern="yyyy-MM-dd" />
						</h:outputText>
					</p:column>
					<p:column headerText="是否具备不停电传动功能">
						<h:outputText value="#{device.transmit}" />
					</p:column>
					<!-- <p:column headerText="是否6月30日前应完成">
						<h:outputText value="#{device.finishBefore==true?'是':'否'}" />
					</p:column> -->
					<p:column headerText="是否6月30日前已完成">
						<h:outputText value="#{device.finish==true?'是':'否'}" />
					</p:column>
					<p:column headerText="已完成日期">
						<h:outputText value="#{device.finishedTime}">
							<f:convertDateTime pattern="yyyy-MM-dd" />
						</h:outputText>
					</p:column>
					<p:column headerText="分析过程">
						<p:commandLink style="color: red; "
							styleClass="ui-commandlink ui-widget fa fa-stack-overflow"
							actionListener="#{specialMaintenanceStationQueryController.showMaintenanceLog(device)}"
							oncomplete="PF('maintenanceLogDialog').show()"
							update="infoForm" />
					</p:column>
				</p:dataTable>
			</h:form>
			<h:form id="infoForm">
				<!-- 特维站点分析 -->
				<p:dialog id="maintenanceLogDialog" widgetVar="maintenanceLogDialog"
					header="特维分析日志" modal="true" width="1000" height="400">
					<p:outputPanel id="maintenanceLogPanel" style="width:100%;">
						<span style="font-size: 18px; color: red;">注意：如果该设备在此期间发生的故障中，故障类型，故障相别均相同的情况有多次，只取时间最近一次的故障显示。
						</span>
						<p:dataList style="font-size:18px;margin-top:20px;"
							emptyMessage="无记录"
							value="#{specialMaintenanceStationQueryController.maintenanceLogInfos}"
							var="item">
							<div>
								<p style="white-space: pre-line;">#{item}</p>
							</div>
						</p:dataList>
					</p:outputPanel>
				</p:dialog>
			</h:form>
			<!-- 未关联设备 -->
			<h:form id="connForm">
				<p:dialog widgetVar="connDig" header="详细信息" modal="true"
					id="connDig" width="1200" height="750">
					<p:dataTable id="bindTab" widgetVar="bindTab"
						value="#{specialMaintenanceStationQueryController.unBindStations}"
						var="device" rowKey="#{device.id}" emptyMessage="无记录"
						style="margin-bottom:20px;text-align:center" rows="10"
						rowIndexVar="ite" paginator="true" paginatorPosition="bottom"
						rowsPerPageTemplate="5,10,15"
						rowStyleClass="#{device.blankId == null ? 'red':null}"
						paginatorTemplate="{Customer} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
						<f:facet name="{Customer}">
							<p:outputLabel
								value="总计：#{specialMaintenanceStationQueryController.unBindStations.size()}条纪录"
								style="margin-right:20px" />
						</f:facet>
						<p:column width="60" headerText="序号">
							<h:outputText value="#{ite+1}" />
						</p:column>
						<p:column headerText="调管机构">
							<h:outputText value="#{device.transMechanism}" />
						</p:column>
						<p:column headerText="运维分子公司">
							<h:outputText value="#{device.companyName}" />
						</p:column>
						<p:column headerText="运维单位">
							<h:outputText value="#{device.operationDepartment}" />
						</p:column>
						<p:column headerText="厂站" width="100">
							<h:outputText value="#{device.station}" />
						</p:column>
						<p:column headerText="间隔" width="140">
							<h:outputText value="#{device.blankName}" />
						</p:column>
						<p:column headerText="设备类型" width="140">
							<h:outputText value="#{device.equipmentType}" />
						</p:column>
						<p:column headerText="是否安排了停电计划" width="100">
							<h:outputText value="#{device.cutPowerPlan ? '是':'否'}" />
						</p:column>
						<p:column headerText="传动开始时间">
							<h:outputText value="#{device.chuandongTime}">
								<f:convertDateTime pattern="yyyy-MM-dd" />
							</h:outputText>
						</p:column>
						<!-- <p:column headerText="是否6月30日前应完成">
							<h:outputText value="#{device.finishBefore==true?'是':'否'}" />
						</p:column -->>
						<p:column headerText="是否已完成">
							<h:outputText value="#{device.finish==true?'是':'否'}" />
						</p:column>
						<p:column headerText="完成时间">
							<h:outputText value="#{device.finishedTime}">
								<f:convertDateTime pattern="yyyy-MM-dd" />
							</h:outputText>
						</p:column>
					</p:dataTable>
				</p:dialog>
			</h:form>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/bootstrap/js/bootstrap-datetimepicker.min.js" />
		<script src="/resources/js/tables/singleScrollTable.js"/>
		<script src="spStationMaintain.js" />
		<script>
			function resetQuery() {
				closeSelectDiv();
				var d = new Date();
				var year = d.getFullYear();
				$("#year").val(year);
			}
		</script>
	</ui:define>
</ui:composition>